import React from 'react';
import PropTypes from 'prop-types';
import s from './AviliableTab.module.css';
import { Link } from 'react-router-dom';
import cn from 'classnames';
import CopyBoard from '../../../../components/CopyBoard';
import Icon from '../../icon';
import Nonsupport from '../../../../components/Nonsupport';

function isE({ info, task }) {
	const feature = JSON.parse(sessionStorage.resD).feature;
	const linkUrl = (task, target) => {
		return `/job-manage/aviliable-task?target=${target}`;
	};
	if (!feature[`${task}Task`]) {
		return (
			<tbody style={{ height: '13rem' }}>
				<Nonsupport className={s.nonsupport}></Nonsupport>
			</tbody>
		);
	} else {
		if (info.length) {
			return (
				<tbody className={s.tbody}>
					{info.map(e => (
						<tr key={e.job_id} className={s.row}>
							<td className={s.td1}>
								<Link to={linkUrl(task, e.target)}>
									<span>{e.name}</span>
								</Link>
							</td>
							<td className={s.td2}>
								<CopyBoard text={e.target} maxWidth="12vw" />
							</td>
							<td className={s.td3}>{e.availability}%</td>
						</tr>
					))}
				</tbody>
			);
		} else {
			return (
				<tbody className={s.tbody}>
					<div className={cn(s.empty)}>
						<Icon active="empty"></Icon>
						<span>暂无数据</span>
					</div>
				</tbody>
			);
		}
	}
}
export default function AviliableTab({ className, task, info }) {
	const isEmoty = info => {
		return (
			<div className={s.tableBox}>
				<table className={s.table}>
					<thead>
						<tr className={s.head}>
							<td className={s.td1}>任务名称</td>
							<td>资产地址</td>
							<td>平均可用率</td>
						</tr>
					</thead>
					{isE({ task, info })}
				</table>
			</div>
		);
	};

	return (
		<div className={cn(className, s.AviliableTab)}>
			<div className={s.headName}>
				<span></span>
				{task === 'http' ? 'HTTP' : 'Ping'}任务
			</div>
			{/*  */}
			{isEmoty(info)}
		</div>
	);
}
AviliableTab.propTypes = {
	className: PropTypes.string,
	task: PropTypes.string,
	info: PropTypes.array,
};
AviliableTab.defaultProps = {
	className: s.AviliableTab,
};
